<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>销售统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">小药店管理系统</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a>
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        欢迎, <span id="username">管理员</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" onclick="logout()">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>

        <!-- 左侧导航区域 -->
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="javascript:;">采购管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="../supplier/supplier.html">供应商信息管理</a></dd>
                            <dd><a href="../supplier/drug.html">药品信息管理</a></dd>
                            <dd><a href="../procurement/add.html">采购单添加</a></dd>
                            <dd><a href="../procurement/list.html">采购单管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">销售管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="../sales/add_xiaoshoudan.html">销售单添加</a></dd>
                            <dd><a href="../sales/xiaoshoumingxi.html">销售单管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;">药店统计管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="instock.html">入库统计</a></dd>
                            <dd><a href="sales.html">销售统计</a></dd>
                            <dd><a href="stock.html">库存查询</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">人事管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="../yuangong/add_yuangong.html">员工添加</a></dd>
                            <dd><a href="../yuangong/yuangong.html">员工管理</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">打印管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="../print/ruku.html">入库单</a></dd>
                            <dd><a href="../print/chuku.html">出库单</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">系统管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="../user/xiuGaiMiMa.html">修改密码</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 内容主体区域 -->
        <div class="layui-body">
            <div style="padding: 15px;">
                <!-- 搜索条件 -->
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="searchForm">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">药品名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="goodsName" placeholder="请输入药品名称" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">销售日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="dateRange" id="dateRange" placeholder="请选择日期范围" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table id="dataTable" lay-filter="dataTable"></table>
                    </div>
                </div>

                <!-- 图表展示 -->
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">销售数量统计图</div>
                            <div class="layui-card-body">
                                <div id="quantityChart" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">销售金额统计图</div>
                            <div class="layui-card-body">
                                <div id="profitChart" style="height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/layui/layui.js"></script>
    <script src="/jquery/jquery-3.6.0.js"></script>
    <script src="/echarts/echarts.min.js"></script>
    <script>
        layui.use(['table', 'form', 'laydate'], function(){
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.jquery;

            // 初始化日期范围选择器
            laydate.render({
                elem: '#dateRange',
                range: true,
                type: 'date',
                format: 'yyyy-MM-dd'
            });

            // 初始化表格
            table.render({
                elem: '#dataTable',
                url: '/statistics/sales',
                page: true,
                limits: [10, 20, 50, 100],
                limit: 10,
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                parseData: function(res) {
                    return {
                        "code": res.code === 0 ? 0 : 1,
                        "msg": res.msg || '',
                        "count": res.data ? res.data.total : 0,
                        "data": res.data ? res.data.list : []
                    };
                },
                where: {
                    goodsName: '',
                    startDate: '',
                    endDate: ''
                },
                cols: [[
                    {field: 'goodsName', title: '药品名称', width: 180},
                    {field: 'outQuantity', title: '销售数量', width: 120},
                    {field: 'outTime', title: '销售时间', width: 160, templet: function(d){
                        return d.outTime ? layui.util.toDateString(new Date(d.outTime), 'yyyy-MM-dd') : '';
                    }},
                    {field: 'responsible', title: '经手人', width: 120},
                    {field: 'documentNo', title: '单据号', width: 160},
                    {field: 'profit', title: '利润', width: 120, templet: function(d){
                        return d.profit ? d.profit.toFixed(2) : '0.00';
                    }}
                ]],
                done: function(res){
                    if(res.data && res.data.length > 0) {
                        renderCharts(res.data);
                    }
                }
            });

            // 监听搜索表单提交
            form.on('submit(searchBtn)', function(data){
                var dateRange = data.field.dateRange;
                var dates = dateRange ? dateRange.split(' - ') : ['', ''];
                
                // 重新加载表格数据
                table.reload('dataTable', {
                    where: {
                        goodsName: data.field.goodsName || '',
                        startDate: dates[0] || '',
                        endDate: dates[1] || ''
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 渲染图表
            function renderCharts(data) {
                // 销售数量图表
                var quantityChart = echarts.init(document.getElementById('quantityChart'));
                var quantityMap = new Map();  // 使用Map来累加数量
                
                // 合并相同药品的数量
                data.forEach(item => {
                    if (item.outQuantity > 0) {
                        const currentQuantity = quantityMap.get(item.goodsName) || 0;
                        quantityMap.set(item.goodsName, currentQuantity + item.outQuantity);
                    }
                });
                
                // 转换为图表数据格式
                var quantityData = Array.from(quantityMap, ([name, value]) => ({name, value}));
                
                quantityChart.setOption({
                    title: {
                        text: '销售数量统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c}件 ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        type: 'scroll'
                    },
                    series: [{
                        name: '销售数量',
                        type: 'pie',
                        radius: '50%',
                        data: quantityData.sort((a, b) => b.value - a.value),  // 按数量降序排序
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                });

                // 销售金额统计图
                var profitChart = echarts.init(document.getElementById('profitChart'));
                var profitMap = new Map();  // 使用Map来累加金额
                
                // 合并相同药品的销售金额
                data.forEach(item => {
                    if (item.profit > 0) {
                        const currentProfit = profitMap.get(item.goodsName) || 0;
                        profitMap.set(item.goodsName, currentProfit + parseFloat(item.profit));
                    }
                });
                
                // 转换为图表数据格式
                var profitData = Array.from(profitMap, ([name, value]) => ({
                    name,
                    value: parseFloat(value.toFixed(2))  // 保留两位小数
                }));
                
                profitChart.setOption({
                    title: {
                        text: '销售金额统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            return params.name + ': ' + params.value.toFixed(2) + '元 (' + params.percent + '%)';
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        type: 'scroll'
                    },
                    series: [{
                        name: '销售金额',
                        type: 'pie',
                        radius: '50%',
                        data: profitData.sort((a, b) => b.value - a.value),  // 按金额降序排序
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                });
            }

            // 退出功能
            function logout() {
                $.ajax({
                    url: '/user/logout',
                    type: 'GET',
                    success: function(res) {
                        if(res.code === 0) {
                            window.location.href = '/login/login.html';
                        } else {
                            layer.msg(res.msg || '退出失败', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('服务器错误', {icon: 2});
                    }
                });
            }
        });
    </script>
</body>
</html> 